<template>
	<view>
		<baseHead title="录用列表" bg="#ffffff" color="#000">
			<template slot="textnr">
				<view style="background-color: #ffffff; position: fixed; z-index: 999;height: 80rpx;width: 100%;">
					<u-search placeholder="请输入" v-model="keyword" @blur="blur" height="64rpx" :showAction="false">
					</u-search>
				</view>
			</template>
		</baseHead>
		<scroll-view @refresherrefresh="onrefresh" refresher-enabled='true' refresher-default-style='none'
			refresher-background='#f1f2f6' refresher-threshold='15' :refresher-triggered='loading' scroll-y
			:style="{'height':windowHeight-customBarH-40+'px'}" class="scrollview" @scrolltolower="ReachBottom"
			v-if="datalist.length>0">
			<u-loading-icon v-if="loading"></u-loading-icon>
			<view class="list">
				<uni-swipe-action class="swipe">
					<uni-swipe-action-item @click="handleDel(item)" class="swipe-item" :right-options="options1"
						v-for="(item,index) in datalist" :key="index">
						<view class="listCla">
							<view class="listClaTop">
								<view class="listClaTop-left">
									<u-avatar class="top-img" shape="circle" :src="URL + item.UserHeadIcon">
									</u-avatar>
								</view>
								<view class="listClaTop-right">
									<view class="listClaTop-right1">
										<view class="listClaTop-right1-left">
											<text>{{item.UserName}}</text>
											<view class="bottom-bottom-left-btn" @click="fnPhone(item)">
												<image class="bottom-bottom-left-btn-img"
													src="/static/icon/dianhua.png"></image>
												<text>呼叫</text>
											</view>
										</view>
										<view class="listClaTop-right1-right" v-if="item.State">
											<view class="weiruzhiCla" v-if="item.State == 0">
												未入职
											</view>
											<view class="yiruzhiCla" v-else>
												已入职
											</view>
										</view>
									</view>
									<view class="listClaTop-right2">
										<text>{{item.JobName}}</text>
										<text>{{'·' + item.Wage}}</text>
										<u-icon class="top-right-bottom-icon" name="arrow-right"></u-icon>
									</view>
									<view class="listClaTop-right3">
										{{'录用时间：'+item.CreatedTime}}
									</view>
								</view>
							</view>
							<view class="listClaCenter" v-if="!item.State"></view>
							<view class="listClaBottom" v-if="!item.State">
								<view class="">
									<u-button class="BtnCla" type="primary" @click="shifouruzhi(item)"
										text="是否入职"></u-button>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>

		<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" width="350" marginTop="150">
		</u-empty>
		<u-action-sheet :actions="list" :closeOnClickOverlay="true" :closeOnClickAction="true" cancelText="取消"
			:show="show" @close="show = false" @select="xuanzhong"></u-action-sheet>
	</view>
</template>

<script>
	import baseHead from '@/pages/component/baseHead.vue'
	export default {
		data() {
			return {
				statusBarH: 0, //状态栏高度
				customBarH: 0, //导航栏高度
				windowHeight: 0, //窗口高度
				URL: this.$config.domain.staticUrl,
				datalist: [],
				keyword: "",
				obj: {
					UserName: "",
					PageIndex: 1,
					PageSize: 10
				},
				status: 'loadmore',
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#F35370',
					}
				}],
				list: [{
						name: '已入职'
					},
					{
						name: '未入职'
					}
				],
				show: false,
				Id: '',
				loading: false,
			}
		},
		//子组件
		components: {
			baseHead
		},
		// onReachBottom() {
		// 	console.log("懒加载")
		// 	// 加载前值为loadmore，加载中为loading，没有数据为nomore
		// 	if (this.status != "nomore") {
		// 		this.status = "loading";
		// 		this.listdata();
		// 	}
		// },
		// 点击 tab 时触发，参数为Object
		onTabItemTap() {},
		created() {
			const app = getApp()
			this.statusBarH = app.globalData.statusBarH;
			this.customBarH = app.globalData.customBarH;
			this.windowHeight = app.globalData.phoneInformation.windowHeight;
			this.listdata()
		},
		// 计算属性
		computed: {},
		// 计算方法
		methods: {

			// 上拉加载更多
			ReachBottom() {
				if (this.status != "nomore") {
					this.status = "loading";
					this.listdata();
				}
			},

			// 下拉刷新
			onrefresh() {
				this.loading = true
				setTimeout(() => {
					this.loading = false;
				}, 1000);
			},

			handleDel(val) {
				let obj = {
					Id: val.Id
				}
				this.$http.huirc.employdel(obj).then(res => {
					console.log(res)
					if (res.Success) {
						this.obj = {
							...this.obj,
							// PageIndex: 1,
						}
						this.datalist = [];
						this.listdata()
						this.$util.toast('删除成功');
					}
				})
			},

			//是否入职按钮
			shifouruzhi(item) {
				this.show = true;
				this.Id = item.Id;
			},

			handleStatus(status, val) {
				let obj = {
					Id: val.Id,
					State: status
				}
				// console.log(obj)
				this.$http.huirc.employupState(obj).then(res => {
					// console.log(res)
					if (res.Success) {
						this.obj = {
							...this.obj,
							PageIndex: 1,
						}
						this.datalist = [];
						this.listdata()
						this.$util.toast("操作成功");
					}
				})
			},
			blur() {
				this.obj = {
					...this.obj,
					KeyWord: this.keyword,
					PageIndex: 1,
				}
				this.datalist = [];
				this.status = 'loadmore';
				this.listdata();
			},
			listdata() {
				console.log(this.obj);
				this.$http.huirc.employlist(this.obj).then(res => {
					if (res.Result) {
						console.log(res.Result)
						if (res.Result.Items.length == 0) {
							// 没有数据----
							this.status = "nomore";
							return;
						}
						this.datalist = this.datalist.concat(res.Result.Items);
						if (res.Result.Items.length >= this.obj.PageSize) {
							this.obj.PageIndex++;
							// 表示还有数据
						} else {
							//没有更多数据了
							this.status = "nomore";
						}
					}
				})
			},

			xuanzhong(res) {
				if (res.name == '未入职') {
					let obj = {
						Id: this.Id,
						State: 0
					}
					this.$http.huirc.employupState(obj).then(res => {
						if (res.Success) {
							this.obj = {
								...this.obj,
								PageIndex: 1,
							}
							this.datalist = [];
							this.listdata()
							this.$util.toast("操作成功");
						}
					})
				} else {
					let obj = {
						Id: this.Id,
						State: 1
					}
					this.$http.huirc.employupState(obj).then(res => {
						if (res.Success) {
							this.obj = {
								...this.obj,
								PageIndex: 1,
							}
							this.datalist = [];
							this.listdata()
							this.$util.toast("操作成功");
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scrollview{
		margin-top: 80rpx;
	}
	.list {
		display: flex;
		flex-direction: column;
		align-items: center;
		

		.swipe {
			width: 95%;

			.swipe-item {
				border-radius: 20rpx;
				margin: 20rpx 0;
				background-color: rgb(243, 83, 112);
			}

			.listCla {
				border-radius: 20rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				padding-bottom: 20rpx;

				.listClaTop {
					display: flex;

					.listClaTop-left {
						margin: 30rpx 0 0 30rpx;

						.top-img {
							width: 98rpx;
							height: 98rpx;
							border-radius: 100rpx;
						}
					}

					.listClaTop-right {
						margin: 30rpx 0 0 20rpx;
						width: 100%;

						.listClaTop-right1 {
							display: flex;
							justify-content: space-between;
							font-size: 32rpx;
							font-weight: bold;
							color: #000000;

							.listClaTop-right1-left {
								display: flex;

								.bottom-bottom-left-btn {
									padding: 0 10rpx;
									border: 1rpx solid #3476FE;
									background: #FFFFFF;
									color: #3476FE;
									border-radius: 10rpx;
									font-size: 20rpx;
									display: flex;
									align-items: center;
									margin-left: 20rpx;

									.bottom-bottom-left-btn-img {
										width: 18rpx;
										height: 20rpx;
										margin-right: 10rpx;
									}
								}
							}

							.listClaTop-right1-right {
								margin-right: 16rpx;

								.weiruzhiCla {
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 10rpx 10rpx 10rpx 10rpx;
									border: 1rpx solid #999999;
									font-size: 26rpx;
									font-weight: 400;
									color: #000000;
									width: 112rpx;
									height: 42rpx;
								}

								.yiruzhiCla {
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 10rpx 10rpx 10rpx 10rpx;
									border: 1rpx solid #12CE76;
									font-size: 26rpx;
									font-weight: 400;
									color: #12CE76;
									width: 112rpx;
									height: 42rpx;
								}
							}
						}

						.listClaTop-right2 {
							margin-top: 13rpx;
							display: flex;
							font-size: 26rpx;
							font-weight: 400;
							color: #666666;

							.top-right-bottom-icon {
								margin-left: 14rpx;
							}
						}

						.listClaTop-right3 {
							margin-top: 7rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.listClaCenter {
					margin-top: 19rpx;
					width: 100%;
					height: 1rpx;
					background-color: #E7E7E8;
				}

				.listClaBottom {
					display: flex;
					justify-content: end;
					margin: 13rpx 30rpx 0 0;

					.BtnCla {
						width: 150rpx;
						height: 50rpx;
					}

					.qqqqq {}
				}
			}
		}


	}


	// .jiaonliguanli {
	// 	background-color: #ffffff;
	// 	margin: 20rpx;
	// 	border-radius: 10rpx;
	// 	padding: 20rpx 40rpx;
	// 	position: relative;

	// 	.viewtext {
	// 		padding: 10rpx 0rpx;
	// 	}

	// 	.textmianst {
	// 		border: 1px solid #E9E9E9;
	// 		margin-left: 40rpx;
	// 		font-size: 24rpx;
	// 		padding: 5rpx 20rpx;

	// 		&.active {
	// 			color: #00CB6C;

	// 		}
	// 	}

	// 	.potstycp {
	// 		position: absolute;
	// 		right: 20rpx;
	// 		font-size: 30rpx;
	// 	}

	// 	.potstpth {
	// 		position: absolute;
	// 		bottom: 20rpx;
	// 		background-color: #F1F2F6;
	// 		right: 40rpx;
	// 		padding: 10rpx 20rpx;
	// 		border-radius: 10rpx;
	// 	}
	// }

	// .flctc {
	// 	margin-top: 40rpx;
	// 	display: flex;
	// 	justify-content: space-around;
	// }

	.colort {
		color: #1684FC;
	}

	.text30 {
		font-size: 30rpx;
	}

	.txtext {
		font-size: 24rpx;
	}

	.btns {
		border: 1px solid #F1F2F6;
		padding: 10rpx 40rpx;
		font-size: 30rpx;
		border-radius: 10rpx;
	}

	.flex {
		display: flex;
		justify-content: space-between;

		&.active {
			.flex-cont {
				flex: 1;
				display: flex;
				justify-content: space-between;
			}
		}

		.btn {
			display: flex;
			align-items: center;
		}
	}
</style>